// import "./index.css"
// import "./electricity.mp3"

const COLOR = ['#FFB6C1', '#DC143C', '#DB7093', '#FF1493', '#C71585', '#FF00FF', '#4B0082', '#0000CD', '#B0C4DE', '#FFFF00']
var direction;
var directionChange = false;
var time;
var width = 200;
var height = 410;
var dotSize = 10;
var startDotsColor = 'green';
var dotList;
var randomDot;
var container;
var electricityAudio;
window.onload = function () {
    addEvent();
    container = document.getElementsByClassName('container')[0];
    electricityAudio = document.getElementById('electricityAudio');
    randomDot = createDot();
    dotList = createStartDots(3);
    container.append(...dotList, randomDot);
    setInterval(() => {
        if (directionChange) {
            clearInterval(time);
            time = move(dotList);
            directionChange = false;
        }
    }, 10);
}

function addEvent() {
    function top() {
        directionChange = 'top' !== direction && direction !== 'down';
        direction = 'top';
    }

    function right() {
        directionChange = 'right' !== direction && direction !== 'left';
        direction = 'right';
    }

    function down() {
        directionChange = 'down' !== direction && direction !== 'top';
        direction = 'down';
    }

    function left() {
        directionChange = 'left' !== direction && direction !== 'right';
        direction = 'left';
    }
    document.getElementsByClassName('topBtn')[0].addEventListener('click', top)
    document.getElementsByClassName('rightBtn')[0].addEventListener('click', right)
    document.getElementsByClassName('downBtn')[0].addEventListener('click', down)
    document.getElementsByClassName('leftBtn')[0].addEventListener('click', left)
    document.onkeydown = function (e) {
        switch (e.keyCode) {
            case 37:
                left();
                break;
            case 38:
                top();
                break;
            case 39:
                right();
                break;
            case 40:
                down();
                break;
        }
    }
}

function createStartDots(num) {
    const y = (height - dotSize) / 2;
    const x = width / 2 - dotSize;
    let dotList = [];
    for (let i = 0; i < num; i++) {
        const dot = document.createElement('div');
        dot.classList.add('dot');
        dot.style.marginTop = y + 'px';
        dot.style.marginLeft = x - dotSize * i + 'px';
        dot.style.backgroundColor = startDotsColor;
        // dot.style.backgroundColor = COLOR[Math.round(Math.random()*9)];
        dot.style.width = 0;
        dot.style.height = 0;
        dot.style.border = "5px solid"
        dot.style.borderColor = "red blue red blue"
        dotList[i] = dot;
    }
    return dotList;
}

function createDot() {
    const x = Math.round(Math.random() * ((width - dotSize) / 10)) * 10;
    const y = Math.round(Math.random() * ((height - dotSize) / 10)) * 10;
    const color = COLOR[Math.round(Math.random() * 9)]
    const dot = document.createElement('div');
    dot.classList.add('dot');
    dot.style.marginLeft = x + 'px';
    dot.style.marginTop = y + 'px';
    dot.style.backgroundColor = color;
    return dot;
}

function goForword(dots) {
    for (let length = dots.length, i = length - 1; i > 0; i--) {
        dots[i].style.marginTop = dots[i - 1].style.marginTop;
        dots[i].style.marginLeft = dots[i - 1].style.marginLeft;
    }
}

function check(dots, direction) {
    let marginTop = parseInt(dots[0].style.marginTop);
    let marginLeft = parseInt(dots[0].style.marginLeft);
    switch (direction) {
        case 'top':
            marginTop -= dotSize;
            break;
        case 'down':
            marginTop += dotSize;
            break;
        case 'right':
            marginLeft += dotSize;
            break;
        case 'left':
            marginLeft -= dotSize;
            break;
    }
    const crashWall = marginTop < 0 || marginTop > (height - dotSize) || marginLeft < 0 || marginLeft > (width - dotSize);
    let crashSelf;
    let length = dots.length;
    if (!crashWall) {
        for (let i = 4; i < length; i++) {
            if (marginTop === parseInt(dots[i].style.marginTop) && marginLeft === parseInt(dots[i].style.marginLeft)) {
                crashSelf = true;
                break;
            }
        }
    }
    const crash = crashWall || crashSelf;
    if (crash) {
        clearInterval(time);
        alert('die');
    } else {
        const randomTop = parseInt(randomDot.style.marginTop);
        const randomLeft = parseInt(randomDot.style.marginLeft);
        if (marginTop === randomTop && marginLeft === randomLeft) {
            electricityAudio.load();
            electricityAudio.play();
            const newDot = document.createElement('div');
            newDot.classList.add('dot');
            newDot.style.backgroundColor = randomDot.style.backgroundColor;
            if (dots[length - 1].style.marginLeft === dots[length - 2].style.marginLeft) {
                newDot.style.marginLeft = dots[length - 1].style.marginLeft;
                if (direction === 'top') {
                    newDot.style.marginTop = dots[length - 1].style.marginTop + dotSize;
                } else {
                    newDot.style.marginTop = dots[length - 1].style.marginTop - dotSize;
                }
            } else {
                newDot.style.marginTop = dots[length - 1].style.marginTop;
                if (direction === 'right') {
                    newDot.style.marginLeft = dots[length - 1].style.marginLeft - dotSize;
                } else {
                    newDot.style.marginLeft = dots[length - 1].style.marginLeft + dotSize;
                }
            }
            dotList.push(newDot);
            randomDot.remove();
            randomDot = createDot();
            container.append(newDot, randomDot);
        }
    }
    return crash;
}

function moveTop(dots) {
    if (check(dots, 'top')) return;
    goForword(dots);
    const marginTop = parseInt(dots[0].style.marginTop) - dotSize;
    dots[0].style.marginTop = marginTop + 'px';
}

function moveDown(dots) {
    if (check(dots, 'down')) return;
    goForword(dots);
    const marginTop = parseInt(dots[0].style.marginTop) + dotSize;
    dots[0].style.marginTop = marginTop + 'px';
}

function moveLeft(dots) {
    if (check(dots, 'left')) return;;
    goForword(dots);
    const marginLeft = parseInt(dots[0].style.marginLeft) - dotSize;
    dots[0].style.marginLeft = marginLeft + 'px';
}

function moveRight(dots) {
    if (check(dots, 'right')) return;
    goForword(dots);
    const marginLeft = parseInt(dots[0].style.marginLeft) + dotSize;
    dots[0].style.marginLeft = marginLeft + 'px';
}

function move(dots) {
    switch (direction) {
        case 'top':
            moveTop(dots);
            return setInterval(() => {
                moveTop(dots)
            }, 100)
            break;
        case 'down':
            moveDown(dots);
            return setInterval(() => {
                moveDown(dots)
            }, 100)
            break;
        case 'left':
            moveLeft(dots);
            return setInterval(() => {
                moveLeft(dots);
            }, 100)
            break;
        case 'right':
            moveRight(dots);
            return setInterval(() => {
                moveRight(dots)
            }, 100)
            break;
    }
}